<template>
  <div class="form-setting-panel">
    <!-- start 标题 -->
    <form-title-setting
      :field="field"
      :setting="setting"
      disabled
      @input="updateForDom"
    ></form-title-setting>
    <!-- end 标题 -->

    <!-- start 描述信息 -->
    <form-describe-setting
      :field="field"
      @input="updateForDom"
    ></form-describe-setting>
    <!-- end 描述信息 -->

    <!-- start 校验 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.check')}}</h4>
      <div class="form-item-box">
        <!-- 必填 -->
        <form-required-setting
          :field="field"
          @input="update"
        ></form-required-setting>
      </div>
    </div>
    <!-- end 校验 -->

    <!-- start 选项 -->
    <div class="form-setting-options">
      <h4>{{$t('common.base.option')}}</h4>
      <div class="form-select-setting-list">
        <div
          v-for="(option, index) in list"
          :key="index"
          class="form-select-setting-option"
        >
          <button type="button" class="btn-text handle">
            <i class="iconfont icon-tuozhuaipaixu"></i>
          </button>
          <input type="text" :value="option.value" disabled />
        </div>
      </div>
      <!-- end 选项 -->
    </div>

    <!-- start 字段权限 -->
    <div class="form-setting-group form-setting-item mar-t-24" v-if="isTaskModeForVisibleCustomer">
      <h4 class="form-item-title">{{$t('common.base.fieldPermissions')}}</h4>
      <div class="form-item-box">
        <!-- 是否对客户可见 -->
        <form-visible-customer-setting :field="field" @input="update"></form-visible-customer-setting>
      </div>
    </div>
    <!-- end 字段权限 -->
  </div>
</template>

<script>
/* api */
import { getDataSourceApi } from '@src/api/TaskApi.ts';

import SettingMixin from '@src/component/form/mixin/setting';
import FormSelectMixin from '@src/component/form/mixin/form.select';
import { settingProps } from '@src/component/form/components/props';
export default {
  name: 'form-engineer-qualification-setting',
  mixins: [SettingMixin, FormSelectMixin],
  props: {
    ...settingProps,
  },
  computed: {},
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.getDataSource();
  },
  methods: {
    /**
     * 获取数据源
     */
    getDataSource() {
      getDataSourceApi()
        .then(res => {
          let arr = [];
          if (res.code == 0) {
            let dataSource = res.result?.engineerQualification || [];
            if (dataSource.length > 0) {
              dataSource.forEach(item => {
                arr.push({ value: item, isDefault: false });
              });
            }
          }
          this.list = arr;
          this.updateOption();
        })
        .catch(err => {
          throw err;
        });
    },
    updateOption(){
      // 更新options的值
      this.$emit('input', {value:this.list, prop: 'options'})
    },
  },
};
</script>
